{extend name='table'}

{block name="style"}
<style>
    .goods_list_table td .layui-table-cell {
        overflow: visible;
        text-overflow: inherit;
        white-space: normal;
        word-break: break-all;
        min-height: 250px;
        padding: 0;
    }
    .layui-table td .layui-table-grid-down{
        display: none;
    }
    .goods-title {
        white-space: normal;padding-bottom:5px;word-break: break-all;font-size: 10px;color:#999;line-height: 20px;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    .custom_style {
        line-height: 22px !important;
        padding: 6px 15px;
    }
    .custom_style .span_right {
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 隐藏溢出内容 */
        text-overflow: ellipsis;
    }
    .change_info {
        height: 100%;
        width: 100%;
        overflow-y: auto;
    }
    .change_info table {
        width: 100% !important;
        border: none;
    }
    .change_info table th,.change_info table td {
        padding: 5px !important;
        border: solid #e8e8e8 1px;
        color: #333;
    }
    .change_info dl {
        display: table;
        width: 100%;
    }
    .change_info dt, .change_info dd {
        display: table-row;
    }
    .change_info dt {
        font-weight: bold;
    }
    .change_info dt, .change_info dd {
        display: flex;
    }
    .change_info dt span:first-child,.change_info dd span:first-child {
        width: 50%;
        border-left: none !important;
    }
    .change_info dt span:nth-child(2),.change_info dd span:nth-child(2) {
        width: 25%;
    }
    .change_info dt span:nth-child(3),.change_info dd span:nth-child(3) {
        width: 15%;
    }
    .change_info dt span:last-child,.change_info dd span:last-child {
        width: 10%;
    }
    .change_info dt span ,.change_info dd span {
        padding: 0 5px;
        border-top: solid #e8e8e8 1px;
        border-left: solid #e8e8e8 1px;
    }
    .change_info dl dd:last-child span {
        border-bottom: solid #e8e8e8 1px;
    }
</style>
{/block}

{block name="content"}
<div class="layui-tab layui-tab-card">
    <div class="layui-tab-content">
        {include file='goods/ozon/goods/index_search'}
        <div class="goods_list_table">
            <table id="selfGoods" data-url="{:sysuri('index')}" data-target-search="form.form-search"></table>
        </div>
    </div>
</div>
<script>

    var maxWidth = window.innerWidth;
    var maxHeight = window.innerHeight;

    $(function () {
        // 隐藏hover
        $('.layui-tab-content').on('mouseenter', "tr", function(){
            $(this).parents('tr').removeClass('layui-table-hover');
            $(this).find('.layui-table-grid-down').hide();
        })
        $('.layui-tab-content').on('mouseenter', ".layui-table-cell", function(){
            $(this).parents('tr').removeClass('layui-table-hover');
            $(this).siblings('.layui-table-grid-down').hide();
        })
        $('.layui-tab-content').on('mouseenter', ".no_hover", function(){
            $(this).parents('tr').removeClass('layui-table-hover');
            $(this).parent().siblings('.layui-table-grid-down').hide();
        })

        $('#selfGoods').layTable({
            height: 'full',
            where: {},
            toolbar: '#toolbarDemo',
            cols: [[
                {checkbox: true, fixed: true},
                {field: 'image_url', title: '{:lang("图片")}', width: 150, align: 'center',  templet:"#imgTpl"},
                {field: 'base_info', title: '{:lang("SPU信息")}', width: 220, align: 'left',templet:"#baseTpl"},
                {field: 'product_info', title: '{:lang("变种信息")}', minWidth: 150, align: 'left',templet:"#productTpl"},
                {field: 'create_at', title: '{:lang("时间")}', width: 200, align: 'left',templet:"#create_atTpl"},
                {field: 'operation', fixed: 'right', title: '{:lang("操作")}', width: 80, align: 'center', toolbar: '#toolbar'}
            ]]
            ,done: function(res, curr, count){
                //动态监听表头高度变化，冻结行跟着改变高度
                $(".layui-table-header tr").resize(function () {
                    $(".layui-table-header  tr").each(function (index, val) {
                        $($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
                    });
                });
                //初始化高度，使得冻结行表头高度一致
                $(".layui-table-header tr").each(function (index, val) {
                    $($(".layui-table-fixed .layui-table-header table tr")[index]).height($(val).height());
                });
                //动态监听表体高度变化，冻结行跟着改变高度
                $(".layui-table-body tr").resize(function () {
                    $(".layui-table-body  tr").each(function (index, val) {
                        $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
                    });
                });
                //初始化高度，使得冻结行表体高度一致
                $(".layui-table-body tr").each(function (index, val) {
                    $($(".layui-table-fixed .layui-table-body table tr")[index]).height($(val).height());
                })
          }
        });

        layui.use(['util', 'table', 'layer'], function(){
            let util = layui.util
            let layer = layui.layer
            let table = layui.table
            //  2.9+ 版本可省略 attr 参数，默认读取 lay-on
            util.on({
                error_info: function(){
                    let g_id = $(this).attr('g_id')
                    let where = {id: g_id}
                    layer.open({
                        type: 1,
                        title: '错误信息',
                        area: ['900px', '650px'],
                        content: '<div class="layui-card"><div class="layui-card-body"><table id="errTable" lay-filter="errTable"></table></div></div>',
                        success: function(layero, index){
                            // 初始化表格
                            table.render({
                                elem: '#errTable',method:'post',where:where,page: true,'id':'errTable',lineStyle: 'height: 100px;',
                                url: '{:sysuri("pushErrorList")}', // 替换为实际的数据接口地址
                                cols: [[
                                    {field: 'spu_code', title: '{:lang("商品SPU")}', width: 150, align: 'center'},
                                    {field: 'type_text', title: '{:lang("错误类型")}', width: 110, align: 'center', templet:function(d){
                                        return d.type_text;
                                    }},
                                    {field: 'message', title: '{:lang("错误信息")}', minWidth: 200, align: 'center'},
                                    {field: 'create_at', title: '{:lang("创建时间")}', width: 150, align: 'center'},
                                ]],
                                parseData: function(res){ // res 即为原始返回的数据
                                    return {
                                        "code": res.code, // 解析接口状态
                                        "msg": res.info, // 解析提示文本
                                        "count": res.data.total, // 解析数据长度
                                        "data": res.data.item // 解析数据列表
                                    };
                                },
                            });
                        }
                    });
                },
            });
        });
    });
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <!-- <a class="layui-btn layui-btn-sm" data-title="{:lang('刷新列表')}">{:lang('刷新列表')}</a> -->
        <!--{if auth("add")}-->
        <a class="layui-btn layui-btn-sm layui-btn-normal" data-title="{:lang('添加产品')}" data-area="['{{maxWidth-210}}px', '{{maxHeight-60}}px']" data-offset="['60px','200px']" data-modal="{:url('add')}" data-table-id="selfGoods" data-close-refresh='selfGoods'>{:lang('添加产品')}</a>
        <!-- {/if} -->

        <!--{if auth("pushGoods")}-->
        <a class="layui-btn layui-btn-sm layui-btn-normal" data-title="{:lang('推送商品')}"  data-action="{:url('pushGoods')}" data-table-id="selfGoods" data-rule="ids#{id};" data-confirm="{:lang('请确认已经修改商品信息')}？">{:lang('推送商品')}</a>
        <!-- {/if} -->
         <!--{if auth("syncStock")}-->
        <a class="layui-btn layui-btn-sm layui-btn-warm" data-title="{:lang('推送库存')}"  data-action="{:url('syncStock')}" data-table-id="selfGoods" data-rule="ids#{id};">{:lang('推送库存')}</a>
        <!-- {/if} -->
    </div>
</script>

<script type="text/html" id="toolbar">
    <div style="margin-top: 5px;">
        <!--{if auth("edit")}-->
        <a style="margin-left: 0;" class="layui-btn layui-btn-xs" data-title="{:lang('编辑')}" data-value="id#{{d.id}}" data-modal='{:url("edit")}' data-table-id="selfGoods" data-close-refresh='selfGoods' data-area="['{{maxWidth-210}}px', '{{maxHeight-60}}px']" data-offset="['20px','200px']">{:lang('编 辑')}</a>
        <!-- {/if} -->
    </div>
    <div>
        <!--{if auth("delete")}-->
        <a style="margin-left: 0;" class="layui-btn layui-btn-xs layui-btn-danger" data-confirm="{:lang('确定要删除吗')}" data-action="{:url('delete')}" data-value="id#{{d.id}}">{:lang('删 除')}</a>
        <!-- {/if} -->
    </div>
    <div>
        <!--{if auth("setInventory")}-->
        <a style="margin-left: 0;" class="layui-btn layui-btn-xs layui-btn-normal" data-modal="{:sysuri('setInventory')}?id={{d.id}}" data-table-id="selfGoods" data-close-refresh='selfGoods' data-area = "['900px','600px']">{:lang('设置库存')}</a>
        <!-- {/if} -->
    </div>
</script>
<!--图片-->
<script type="text/html" id="imgTpl">
    <img src="{{ d.main_pic }}" class="preview-all" style="max-width: 80px;max-height: 80px;margin-top: 5px;" data-tips-image data-tips-hover >
</script>
<!--SPU信息-->
<script type="text/html" id="baseTpl">
    <div class="custom_style">
        <div class="goods-title">{{ d.title }}</div>
        <div>SPU：{{ d.spu_code }}</div>
        <div>{:lang('分类')}：{{ d.shop_category_name }}</div>
        <div>{:lang('店铺')}：{{ d.shop_name }}</div>
        <div>{:lang('来源')}：{{ d.from_text }}</div>
        <div>{:lang('热销词')}：{{ d.keyword }}</div>
        <div style="display: flex;">
            <span style="flex-shrink: 0;">{:lang('默认供应商')}：</span>
            <span class="span_right">{{ d.supplier_name }}</span>
        </div>
        <div style="display: flex;max-height: 65px;">
            <span style="flex-shrink: 0;">货源：</span>
            <span class="span_right" style="white-space: normal;"><a href="{{ d.source_url }}" target="_blank">{{ d.source_url }}</a></span>
        </div>
    </div>
</script>
<!--变种信息-->
<script type="text/html" id="productTpl" >
    <div class="change_info">
        <dl>
            <dt>
                <span>SKU</span>
                <span>{:lang('规格')}</span>
                <span>{:lang('价格')}</span>
                <span>{:lang('库存')}</span>
            </dt>
            {{#  layui.each(d.skuList, function(index, item){ }}
            <dd>
                <span>{{ item.goods_nu ? item.goods_nu : item.title }}</span>
                <span>{{ item.attribute_titles }}</span>
                <span>{{ item.price }}</span>
                <span>{{ item.stock }}</span>
            </dd>
            {{#  }); }}
        </dl>
    </div>
</script>
<!--时间操作人-->
<script type="text/html" id="create_atTpl" >
    <div class="custom_style">
        <div>{:lang('添加')}：{{ d.create_at }}</div>
        <div>{:lang('更新')}：{{ d.update_at }}</div>
        <div>{:lang('采集人')}：{{ d.create_name }}</div>
        <div>{:lang('更新人')}：{{ d.update_name }}</div>
        <div>{:lang('推送状态')}：{{ d.push_status_text }}</div>
        <div><span class="layui-badge" lay-on='error_info' g_id="{{ d.id }}">{:lang('查看错误')}</span></div>
    </div>
</script>
{/block}
